﻿@page "/kanban/default-functionalities"
@inherits SampleBaseComponent;

@using ej2_blazor_kanban_data_models
@using Syncfusion.Blazor.Kanban

<SampleDescription>
    <p>This example demonstrates the default functionalities of the Kanban component. You can drag and drop the cards across multiple states of the Kanban board by default.</p>
</SampleDescription>
<ActionDescription>
    <p>The sample is configured with a minimal setting that is mandatory to render Kanban layout and cards. The <code>DataSource</code>, <code>KanbanColumns</code>, and <code>KanbanCardSettings</code> are essential fields to render the Kanban component. By default, you can drag and drop the cards across all stages of Kanban.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <SfKanban KeyField="Status" DataSource="@cardData">
        <KanbanColumns>
            @foreach (ColumnModel item in columnData)
            {
                <KanbanColumn HeaderText="@item.HeaderText" KeyField="@item.KeyField"></KanbanColumn>
            }
        </KanbanColumns>
        <KanbanCardSettings HeaderField="Title" ContentField="Summary" GrabberField="Color" FooterCssField="ClassName" TagsField="CardTags"></KanbanCardSettings>
    </SfKanban>
</div>

<style>
    .e-kanban .e-card .e-card-footer {
        display: flex;
        justify-content: space-between;
    }

        .e-kanban .e-card .e-card-footer > div:last-child {
            margin-left: auto;
        }

        .e-kanban .e-card .e-card-footer .e-card-footer-css {
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            height: 16px;
            width: 16px;
            margin-right: 8px;
        }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-improvement {
                background-image: url(https://syncfusion.atlassian.net/secure/viewavatar?size=medium&avatarId=15507&avatarType=issuetype);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-story {
                background-image: url(https://syncfusion.atlassian.net/secure/viewavatar?size=medium&avatarId=15515&avatarType=issuetype);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-epic {
                background-image: url(https://syncfusion.atlassian.net/secure/viewavatar?size=medium&avatarId=15507&avatarType=issuetype);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-bug {
                background-image: url(https://syncfusion.atlassian.net/secure/viewavatar?size=medium&avatarId=15503&avatarType=issuetype);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-others {
                background-image: url(https://syncfusion.atlassian.net/images/icons/issuetypes/documentation.png);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-low {
                background-image: url(https://syncfusion.atlassian.net/images/icons/priorities/trivial.svg);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-high {
                background-image: url(https://syncfusion.atlassian.net/images/icons/priorities/major.svg);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-critical {
                background-image: url(https://syncfusion.atlassian.net/images/icons/priorities/critical.svg);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-release {
                background-image: url(https://syncfusion.atlassian.net/images/icons/priorities/critical.svg);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-normal {
                background-image: url(https://syncfusion.atlassian.net/images/icons/priorities/minor.svg);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-nancy {
                background-image: url(https://ej2.syncfusion.com/demos/src/kanban/images/Nancy%20Davloio.png);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-andrew {
                background-image: url(https://ej2.syncfusion.com/demos/src/kanban/images/Andrew%20Fuller.png);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-janet {
                background-image: url(https://ej2.syncfusion.com/demos/src/kanban/images/Janet%20Leverling.png);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-steven {
                background-image: url(https://ej2.syncfusion.com/demos/src/kanban/images/Steven%20walker.png);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-michael {
                background-image: url(https://ej2.syncfusion.com/demos/src/kanban/images/Michael%20Suyama.png);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-robert {
                background-image: url(https://ej2.syncfusion.com/demos/src/kanban/images/Robert%20King.png);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-laura {
                background-image: url(https://ej2.syncfusion.com/demos/src/kanban/images/Laura%20Callahan.png);
            }

            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-nancy,
            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-andrew,
            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-janet,
            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-steven,
            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-michael,
            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-robert,
            .e-kanban .e-card .e-card-footer .e-card-footer-css.e-laura {
                border-radius: 72px;
                height: 30px;
                width: 30px;
            }
</style>


@code{
    private List<KanbanDataModel> cardData = new KanbanDataModel().GetTasks();
    private List<ColumnModel> columnData = new List<ColumnModel>() {
        new ColumnModel(){ HeaderText= "To Do", KeyField= new List<string>() { "Open" } },
        new ColumnModel(){ HeaderText= "In Progress", KeyField= new List<string>() { "InProgress" } },
        new ColumnModel(){ HeaderText= "Testing", KeyField= new List<string>() { "Testing" } },
        new ColumnModel(){ HeaderText= "Done", KeyField=new List<string>() { "Close" } }
    };
}